<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="houdunwang">houdunwang.com</div>
      </div>
    <script>
        //innerhtml新数据把旧数据替换了
        
        // let div=document.querySelector("#app");
        // console.log(div.innerHTML);
        // // <div class="houdunren" data="hd">houdunren.com</div>
        // // <div class="houdunwang">houdunwang.com</div>
        // div.innerHTML=`<a>a标签</a>`;
        // console.log(div.innerHTML);
        // // <a>a标签</a>原来的内容删除了


        //outerhtml 原来的数据和后面的数据一样，新旧数据一样
        let div1=document.querySelector("#app");
        console.log(div1.outerHTML);
        div1.outerHTML=`<a>a标签</a>`;
        console.log(div1.outerHTML);
    </script>
</body>
</html>